<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理练习</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            let i = 1;
            // 上传更多
            $("#more").click(function () {
                let d = $("#d").clone(true);
                d.attr("id", "d" + i);
                $(this).before(d);
                // 找到当前新增的div中的文件选择器
                // 假设div的id为d1,则文件选择器为:$("#d1 input")
                // 此时的id为d+i,则文件选择器为:$("#d"+i+" input")
                $("#d" + i + " input").val("");
                i++;
            });

            // 删除
            $("a").click(function () {
                // if($(this.parentNode).attr("id") != "d"){
                //     $(this.parentNode).remove();
                // }
                if ($(this).parent().attr("id") != "d") {
                    $(this).parent().remove();
                }
            });

            // 显示文件名
            $("#show").click(function () {
                // 直接输出value属性的时候,只显示了匹配到的第一个元素
                // console.log($("input").val());
                // 因此,不能直接调用,需要对匹配的所有元素进行遍历
                // $("input[type='file']").each(function(){
                //     // 当函数无参时,可以使用this表示当前正在遍历的元素
                //     console.log($(this).val());
                // });
                // $("input[type='file']").each(function(i){
                //     // 当函数存在一个参数的时候,该参数表示的是遍历的元素的索引号
                //     // 仍然可以通过this表示当前元素
                //     console.log("索引号:"+i+",文件:"+$(this).val());
                // });
                $("input[type='file']").each(function(i,e){
                    // 当函数存在两个参数的时候
                    // 参数一:表示的是遍历的元素的索引号
                    // 参数二:表示的是遍历的元素是谁
                        // 此时的参数二表示的是DOM对象
                    // 仍然可以通过this表示当前元素
                    // console.log("索引号:"+i+",文件:"+$(this).val());
                    console.log("索引号:"+i+",文件:"+$(e).val());
                });
            });
        });
    </script>
</head>
<body>
<!--
    需求:
        1.当点击上传更多的时候,页面中新增一个div,该div与#d的div完全一致
            如果新增之前的div中文件选择器已经选择了文件之后
            新增了之后原始的文件选择器文件内容不变
            新增了之后的新的文件选择器没有选择任何内容
            即:通过点击上传更多出现的文件选择器的内容始终是空的
            新增的div的id属性永不重复
        2.删除时可以删除新增出来的,原始的第一个不能被删除
            即:只能删除通过上传更多新增出来的div
-->
<div id="d">
    <input type="file"/>
    <a href="javascript:;">删除</a>
</div>
<input type="button" value="上传更多" id="more"/>
<input type="button" value="显示文件名" id="show"/><br/>
</body>
</html>